<template>
  <div class="page">
    <BrandHeader />
    <div class="content">
      <div class="topbar">
        <button class="back-btn" @click="goBack">返回</button>
        <h1 class="title">我的片单 <span class="count" v-if="count">（{{ count }}）</span></h1>
        <div class="spacer" />
        <button v-if="count" class="clear-btn" @click="clearAll">清空片单</button>
      </div>
      <p class="tip" v-if="!count">还没有收藏影片，去热门或首页添加一些吧～</p>

      <div v-else class="grid">
        <div
          v-for="m in items"
          :key="m.id"
          class="card-wrap"
        >
          <MovieCard :movie="m" :cardWidth="200" :posterHeight="260" @select="goDetail" />
          <button class="remove-btn" @click.stop="removeOne(m.id)" aria-label="移除收藏">×</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyWatchlistPage'
}
</script>

<script setup>
import BrandHeader from '@/components/BrandHeader.vue'
import MovieCard from '@/components/MovieCard.vue'
import { useRouter } from 'vue-router'
import { onMounted, ref, computed, onBeforeUnmount } from 'vue'
import { watchlistService } from '@/services/watchlist.js'
const router = useRouter()
function goBack(){ if (window.history.length>1) router.back(); else router.push('/recommend') }

const items = ref([])
const count = computed(() => items.value.length)

function refresh() {
  items.value = watchlistService.list()
}

function removeOne(id) {
  watchlistService.remove(id)
  refresh()
}

function clearAll() {
  if (!count.value) return
  if (confirm('确定要清空片单吗？')) {
    watchlistService.clear()
    refresh()
  }
}

function goDetail(id) {
  if (!id) return
  router.push({ name: 'movie', params: { id } })
}

function onStorage(e){
  // 监听其他标签页更新片单
  try {
    const key = e?.key || ''
    if (typeof key === 'string' && key.startsWith('watchlist_v1_')) {
      refresh()
    }
  } catch (err) { void 0 /* noop: 忽略 storage 事件解析错误 */ }
}

onMounted(() => {
  refresh()
  if (typeof window !== 'undefined') window.addEventListener('storage', onStorage)
})
onBeforeUnmount(() => {
  if (typeof window !== 'undefined') window.removeEventListener('storage', onStorage)
})
</script>

<style scoped>
.page { min-height: 100vh; background: #0f0f0f; color: #fff; }
.content { padding: 10px 16px 20px; }
.topbar { display:flex; align-items:center; gap: 12px; margin: 4px 0 10px; }
.back-btn { background: #fff; color:#000; border:1px solid #e5e5e5; border-radius:10px; padding:8px 14px; font-size:16px; font-weight:700; cursor:pointer; }
.title { margin:0; font-size:22px; font-weight:700; }
.count { font-size: 16px; color:#cfd2d4; font-weight:400; }
.tip { color:#cfd2d4; margin-top: 10px; }
.spacer { flex: 1; }
.clear-btn { background:#1f1f1f; color:#ddd; border:1px solid #333; border-radius:10px; padding:8px 12px; cursor:pointer; }
.clear-btn:hover { background:#2a2a2a; }

/* 7列网格，与“全部电影”布局一致 */
.grid { display:grid; grid-template-columns: repeat(7, 200px); gap: 28px; justify-content: start; margin-top: 12px; }
.card-wrap { position: relative; }
.remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid #444; background: rgba(0,0,0,.6); color:#fff; cursor: pointer; font-size: 18px; line-height: 26px; text-align:center;
}
.remove-btn:hover { background: rgba(255, 78, 78, .9); border-color: #ff4e4e; }

@media (max-width: 1400px) { .grid { grid-template-columns: repeat(6, 200px); } }
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(5, 200px); } }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(4, 200px); } }
@media (max-width: 820px) { .grid { grid-template-columns: repeat(3, 200px); } }
@media (max-width: 620px) { .grid { grid-template-columns: repeat(2, 200px); } }
</style>
